<template>
	<view class="apply">
		<u-form :model="dataForm" ref="uForm">

			<u-form-item label="经营类目" label-width='220' v-if="categoryList[0]" required prop="industry" ref='bb'>
				<u-input v-model="dataForm.industry" type="select" input-align='right' @click='selectShow=true'
					placeholder="请选择经营类目" />
			</u-form-item>

			<u-form-item label="商户门头" label-width='220' required prop="ShopSignBoardPicUrl">
				<view @click="onUpload('ShopSignBoardPicUrl')">
					<view class="apply_img" v-if="!dataForm.ShopSignBoardPicUrl">+</view>
					<image class="apply_img" :src="dataForm.ShopSignBoardPicUrl" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>
			<u-form-item label="商户内景" label-width='220' required prop="ShopScenePicUrl">
				<view @click="onUpload('ShopScenePicUrl')">
					<view class="apply_img" v-if="!dataForm.ShopScenePicUrl">+</view>
					<image class="apply_img" :src="dataForm.ShopScenePicUrl" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>

			<u-form-item label="特殊企业资质" label-width='220' v-if="categoryObj.title" prop="SpecialLicensePicUrl">
				<view class="u-flex" @click="onUpload('SpecialLicensePicUrl')">
					<view class="apply_img" v-if="!dataForm.SpecialLicensePicUrl">+</view>
					<image class="apply_img" :src="dataForm.SpecialLicensePicUrl" mode="aspectFill" v-else></image>
					<view class="sp_btn" @click.stop="onUploadTitle(categoryObj.title)">
						上传条件
					</view>
				</view>
			</u-form-item>

			<u-form-item label="营业执照" label-width='220'>
				<view @click="onUpload('BusinessLicensePicUrl')">
					<view class="apply_img" v-if="!dataForm.BusinessLicensePicUrl">+</view>
					<image class="apply_img" :src="dataForm.BusinessLicensePicUrl" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>

			<u-form-item label="营业执照号码" label-width='220'>
				<u-input v-model="dataForm.BusinessLicenseNo" input-align='right' placeholder="请输入营业执照号码" />
			</u-form-item>

			<u-form-item label="商户联系人" label-width='220' required prop="ContactName">
				<u-input v-model="dataForm.ContactName" input-align='right' placeholder="请输入商户联系人" />
			</u-form-item>

			<u-form-item label="店铺名称" label-width='220' required prop="ShopName">
				<u-input v-model="dataForm.ShopName" input-align='right' placeholder="请输入商户联系人" />
			</u-form-item>
			<u-form-item label="所在地区" label-width='220' v-if="sumbitShow" required>
				<u-input v-model="addressName" input-align='right' type="select" @click='goSelect'
					placeholder="请选择所在地区" />
			</u-form-item>

			<u-form-item label="店铺地址" label-width='220' required>
				<u-input v-model="dataForm.ShopAddress.DetailAddress" input-align='right' placeholder="请输入店铺地址" />
			</u-form-item>

			<u-form-item label="联系人手机" label-width='220' required prop="ContactMobile">
				<u-input v-model="dataForm.ContactMobile" input-align='right' placeholder="请输入联系人手机" />
			</u-form-item>
			<u-form-item label="法人手机" label-width='220'>
				<u-input v-model="dataForm.BusinessLicenseMobile" input-align='right' placeholder="请输入法人手机" />
			</u-form-item>

			<u-form-item label="联系人邮箱" label-width='220'>
				<u-input v-model="dataForm.ContactEmail" input-align='right' placeholder="请输入联系人邮箱" />
			</u-form-item>
			<u-form-item label="支付宝账号" label-width='220' required prop="Account">
				<u-input v-model="dataForm.Account" input-align='right' placeholder="请输入支付宝账号" />
			</u-form-item>

			<u-form-item label="营业期限" label-width='220' required>
				<view class="qx">
					<text class="u-m-r-20">否</text>
					<u-switch v-model="dataForm.LongTerm"></u-switch>
					<text class="u-m-l-20">长期</text>
				</view>
			</u-form-item>

			<u-form-item label="营业期限" label-width='220' v-if="!dataForm.LongTerm" required prop="DateLimitation">
				<u-input v-model="dataForm.DateLimitation" type="select" input-align='right' @click='timeShow=true'
					placeholder="请选择营业期限" />
			</u-form-item>

			<u-form-item label="服务费率" label-width='220'>
				<u-input v-model="dataForm.Rate" input-align='right' disabled />
			</u-form-item>

			<u-button type="primary" @click="onSubmit" v-if="sumbitShow">提交</u-button>
		</u-form>
		<u-select v-model="selectShow" mode="single-column" :list="categoryList" @confirm="onSelectConfirm"></u-select>
		<u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm='onTimeConfirm'></u-picker>
		<addressSelect ref='addressSelectRef' @callback='onAddressCallback' />

	</view>
</template>

<script>
	import {
		uploadImage
	} from '@/utils/upload.js'
	import addressSelect from '../../components/addressSelect.vue'
	export default {
		components: {
			addressSelect
		},
		data() {
			return {
				sumbitShow: true,
				selectShow: false,
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
				},
				addressName: '',
				dataList: [],
				categoryList: [],
				submitStatus: false,
				categoryObj: {},
				dataForm: {

					MccCode: '', // 商家经营类目
					SpecialLicensePicUrl: '', // 企业特殊资质图片
					Rate: 0.38, // 服务费率（%），0.38~0.6 之间
					SignAndAuth: true,
					BusinessLicenseNo: '', // 营业执照号码
					BusinessLicensePicUrl: '', // 营业执照图片
					BusinessLicenseAuthPicUrl: '', //营业执照授权函图片，个体工商户如果使用总公司或其他公司的营业执照认证需上传该授权函图片
					LongTerm: true, // 营业期限是否长期有效 1 可选
					DateLimitation: '', //营业期限
					ShopScenePicUrl: '', //店铺内景图片
					ShopSignBoardPicUrl: '', //店铺门头照图片
					ShopName: '', //店铺名称
					BusinessLicenseMobile: '', //营业照法人手机
					ContactMobile: '', //联系人手机
					Account: '', //支付宝账号
					ContactName: '', //联系人姓名
					ContactEmail: '', //联系人邮箱
					appid: '2021003122634158',
					salesman: 0, //业务员
					ShopAddress: {
						CountryCode: '156', //国家编码
						ProvinceCode: '', //省份编码
						CityCode: '', //城市编码
						DistrictCode: '', //区县编码
						DetailAddress: '', //详细地址
					},
				},
				rules: {
					ContactName: {
						required: true,
						message: '请输入联系人名称',
						trigger: ['blur'],
					},
					Account: {
						required: true,
						message: '请输入支付宝账号',
						trigger: ['blur'],
					},
					ShopName: {
						required: true,
						message: '请输入店铺名称',
						trigger: ['blur'],
					},

					ContactMobile: {
						required: true,
						message: '请输入手机号',
						trigger: ['blur'],
					},
					industry: {
						required: true,
						message: '请选择选择经营类目',
						trigger: 'change',
					},
					DateLimitation: {
						required: true,
						message: '请输入营业期限',
						trigger: 'change',
					},
					ShopSignBoardPicUrl: {
						required: true,
						message: '请选择店门头图片',
						trigger: 'change',
					},
					ShopScenePicUrl: {
						required: true,
						message: '请选择店内景图片',
						trigger: 'change',
					},
					SpecialLicensePicUrl: {
						required: true,
						message: '请选择特殊企业资质图片',
						trigger: 'change',
					},
					BusinessLicensePicUrl: {
						required: true,
						message: '请选择营业执照图片',
						trigger: 'change',
					},
				}
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {

			if (options.sumbitShow == 'false') {
				this.sumbitShow = false
				this.initDataObj()
			}
			this.initPage()

		},
		onShow() {

		},
		methods: {

			initPage() {
				this.initCategory() //获取类目
			},

			initDataObj() {
				// 获取当前页面栈
				let pages = getCurrentPages();
				// 最后一个元素为当前页面,-1 为当前页面的数据 ,-2 为你上一页的数据 
				let prevPage = pages[pages.length - 2]
				this.dataForm = prevPage.$vm.$refs.baseRef.dataObj.alipay_json

			},


			initCategory() {
				this.$adminPost('AdminGetClassificationList', {
					type: 3
				}).then(res => {
					this.categoryList = res.data.map((el) => {
						return {
							value: el['一级类目code'] + '_' + el['二级类目code'],
							label: el['新版MCC-一级类目'] + '-' + el['新版MCC-二级类目'],
							title: el['所需资质'],
						}
					})
				})
			},

			goSelect() {
				this.$refs.addressSelectRef.goSelect()
			},

			onAddressCallback(val) {
				let {
					city,
					province,
					region
				} = val
				this.addressName = `${province.label} - ${city.label} - ${region.label}`
				this.dataForm.ShopAddress = {
					...this.dataForm.ShopAddress,
					CityCode: city.value,
					DistrictCode: region.value,
					ProvinceCode: province.value,
				}
			},

			beforeSumbit() {
				if (!this.dataForm.ShopAddress.DetailAddress) {
					this.$toast('请输入店铺地址')
					return 'error'
				}
				if (!this.dataForm.LongTerm) delete this.dataForm.DateLimitation

				this.dataForm.fk_business_id = this.vuex_business.pk_id
				this.dataForm.fk_supplier_id = this.vuex_adminuser.supplier_id

			},

			onAreaConfirm(val) {
				console.log(val)
			},

			onBack(judeg) {

				if (judeg) {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
					return
				}


				if (!judeg) this.submitStatus = false


			},
			onSubmit() {
				
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					if (this.beforeSumbit() == 'error') return
					if (this.submitStatus) return
					this.submitStatus = true
					this.$adminPost('AgentFaceToFaceSign', {}, JSON.stringify(this.dataForm)).then(res => {
						this.$toast('已申请')
						this.onBack(true)
					}).catch(() => {
						this.onBack()
					})
				});
			},
			onUploadTitle(content) {
				uni.showModal({
					title: '提示',
					content,
				});
			},
			onSelectConfirm(val) {
				let data = this.categoryList.filter(el => el.value == val[0].value)
				this.categoryObj = data[0]
				this.dataForm.MccCode = data[0].value
				this.dataForm.industry = data[0].label

			},
			onTimeConfirm(time) {
				let {
					year,
					month,
					day
				} = time
				this.dataForm.DateLimitation = `${year}-${month}-${day}`
			},
			onUpload(name) {
				uploadImage().then(res => {
					this.$set(this.dataForm, name, res[0][0])
				})
			},
		}
	};
</script>
<style>
	/* 	page {
		background-color: #f5f5f5;

	} */
</style>
<style lang="scss" scoped>
	.apply {
		padding: 0 35rpx;
		background-color: #ffffff;

		.apply_img {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 200rpx;
			border: 1rpx solid rgba(0, 0, 0, .1);
			margin-left: auto;
			color: #999999;
			font-size: 45rpx;
		}

		.qx {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.sp_btn {
			background-color: #0090FF;
			color: #ffffff;
			margin-left: 30rpx;
			margin-top: auto;
			font-size: 26rpx;
			border-radius: 15rpx;
			padding: 0 15rpx;
		}

	}



	::v-deep .u-form-item__message {
		padding-left: 0 !important;
		margin-left: auto !important;
	}
</style>
